igniteui-dockmanager 1.16.0-beta.6 → 1.16.0

package/custom-elements.json

@@ -1558,7 +1558,7 @@
               "kind": "field",
               "name": "showPaneHeaders",
               "type": {
-                "text": "'onHoverOnly' | 'always'"
+                "text": "'always' | 'onHoverOnly'"
               },
               "default": "'always'"
             },
@@ -1566,8 +1566,9 @@
               "kind": "field",
               "name": "showHeaderIconOnHover",
               "type": {
-                "text": "'closeOnly' | 'moreOptionsOnly' | 'all'"
-              }
+                "text": "'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'"
+              },
+              "default": "'none'"
             },
             {
               "kind": "field",
@@ -1650,7 +1651,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true"
+              "default": "false"
             },
             {
               "kind": "method",
@@ -3125,14 +3126,14 @@
               "name": "show-pane-headers",
               "fieldName": "showPaneHeaders",
               "type": {
-                "text": "'onHoverOnly' | 'always'"
+                "text": "'always' | 'onHoverOnly'"
               }
             },
             {
               "name": "show-header-icon-on-hover",
               "fieldName": "showHeaderIconOnHover",
               "type": {
-                "text": "'closeOnly' | 'moreOptionsOnly' | 'all'"
+                "text": "'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'"
               }
             },
             {
@@ -3515,9 +3516,10 @@
               "kind": "field",
               "name": "showHeaderIconOnHover",
               "type": {
-                "text": "'closeOnly' | 'moreOptionsOnly' | 'all'"
+                "text": "'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'"
               },
-              "description": "Determines which tab header icons should show when hovering over the tab with the mouse. Defaults to undefined."
+              "default": "'none'",
+              "description": "Determines which tab header icons should show when hovering over the tab with the mouse. Defaults to none."
             },
             {
               "kind": "field",
@@ -3563,8 +3565,9 @@
               "kind": "field",
               "name": "showPaneHeaders",
               "type": {
-                "text": "'onHoverOnly' | 'always'"
+                "text": "'always' | 'onHoverOnly'"
               },
+              "default": "'always'",
               "description": "Determines whether pane headers are only shown on hover or always visible. Defaults to 'always'."
             },
             {
@@ -3597,7 +3600,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Determines whether the end user can dock the dragged pane directly in the parent split pane by dragging it over a splitter.\r\nIf enabled, a docking indicator will be shown over the splitter's drag handler. Defaults to true."
+              "description": "Determines whether the end user can dock the dragged pane directly in the parent split pane by dragging it over a splitter.\r\nIf enabled, a docking indicator will be shown over the splitter's drag handler. Defaults to false."
             },
             {
               "kind": "method",
@@ -6094,8 +6097,9 @@
               "kind": "field",
               "name": "showHeaderIconOnHover",
               "type": {
-                "text": "'closeOnly' | 'moreOptionsOnly' | 'all'"
-              }
+                "text": "'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'"
+              },
+              "default": "'none'"
             },
             {
               "kind": "method",
@@ -6218,7 +6222,7 @@
               "name": "show-header-icon-on-hover",
               "fieldName": "showHeaderIconOnHover",
               "type": {
-                "text": "'closeOnly' | 'moreOptionsOnly' | 'all'"
+                "text": "'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'"
               }
             }
           ],

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-050356a8.js');
-const locale = require('./locale-f3ee23f4.js');
+const locale = require('./locale-93b1abd9.js');
 
 const buttonComponentCss = "button{position:static;display:inline-flex;align-items: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;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
 
@@ -2321,7 +2321,7 @@ const IgcDockManager = class {
     this.navigationPaneMeta = undefined;
     this.allowMaximize = true;
     this.showPaneHeaders = 'always';
-    this.showHeaderIconOnHover = undefined;
+    this.showHeaderIconOnHover = 'none';
     this.maximizedPane = undefined;
     this.resourceStrings = undefined;
     this.allowFloatingPanesResize = true;
@@ -2332,7 +2332,7 @@ const IgcDockManager = class {
     this.proximityDock = false;
     this.closeBehavior = locale.IgcPaneActionBehavior.allPanes;
     this.unpinBehavior = locale.IgcPaneActionBehavior.allPanes;
-    this.allowSplitterDock = true;
+    this.allowSplitterDock = false;
     this.layout = undefined;
     this.draggedPane = undefined;
     this.dropPosition = undefined;
@@ -3305,8 +3305,8 @@ const IgcDockManager = class {
         splitterFound = true;
         const splitterCenterX = splitterRect.left + splitterRect.width / 2;
         const splitterCenterY = splitterRect.top + splitterRect.height / 2;
-        this.splitterDockingIndicator.style.left = `${splitterCenterX - this.splitterDockingIndicator.clientWidth + 2}px`;
-        this.splitterDockingIndicator.style.top = `${splitterCenterY - this.splitterDockingIndicator.clientHeight + 2}px`;
+        this.splitterDockingIndicator.style.left = `${splitterCenterX - this.splitterDockingIndicator.clientWidth / 2 - 1}px`;
+        this.splitterDockingIndicator.style.top = `${splitterCenterY - this.splitterDockingIndicator.clientHeight / 2 - 1}px`;
         this.splitterDockingIndicator.position = isSplitterHorizontal ? locale.IgcDockingIndicatorPosition.splitterHorizontal : locale.IgcDockingIndicatorPosition.splitterVertical;
         this.setSplitterDockingIndicatorVisibility('visible');
         // check if cursor is over splitterIndicator
@@ -3454,7 +3454,7 @@ const IgcDockManager = class {
     const target = event.currentTarget;
     const rootNode = this.getRootNode();
     const pathHTMLElements = event.composedPath().filter(et => et instanceof HTMLElement).map(et => et);
-    this._tabHeaderIconClicked = this.showHeaderIconOnHover &&
+    this._tabHeaderIconClicked = this.showHeaderIconOnHover !== 'none' &&
       pathHTMLElements.filter(el => el.attributes.getNamedItem('part') && el.attributes.getNamedItem('part').value === 'tab-header-more-options floating').length > 0;
     requestAnimationFrame(() => {
       this.contentPaneId = pane.contentId;
@@ -3506,7 +3506,7 @@ const IgcDockManager = class {
     }
   }
   handleTabIconClick(p, position, isFloating, event) {
-    if (!this.showHeaderIconOnHover) {
+    if (this.showHeaderIconOnHover === 'none') {
       this.focusElement();
     }
     if (!isFloating && position === IgcTabHeadersPosition.bottom) {
@@ -3796,13 +3796,13 @@ const IgcDockManager = class {
     return (index.h("igc-root-docking-indicator-component", { position: position }));
   }
   renderDockingIndicators() {
-    var _a, _b;
+    var _a, _b, _c;
     const startPosition = this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.left : locale.IgcDockingIndicatorPosition.right;
     const endPosition = this.direction !== 'rtl' ? locale.IgcDockingIndicatorPosition.right : locale.IgcDockingIndicatorPosition.left;
     // Only show the joystick indicator if the target drop location is an empty split pane 
     const hideJoystickIndicator = this.dropTargetPaneInfo &&
-      ((_a = this.dropTargetPaneInfo.pane) === null || _a === void 0 ? void 0 : _a.type) == "splitPane" &&
-      this.service.getSplitPaneVisibleChildren(this.dropTargetPaneInfo.pane).length;
+      (((_a = this.dropTargetPaneInfo.pane) === null || _a === void 0 ? void 0 : _a.type) == "documentHost" ||
+        (((_b = this.dropTargetPaneInfo.pane) === null || _b === void 0 ? void 0 : _b.type) == "splitPane" && this.service.getSplitPaneVisibleChildren(this.dropTargetPaneInfo.pane).length));
     return (index.h("div", { class: "docking-indicators-container", style: {
         display: this.showDockingIndicators ? 'flex' : 'none'
       } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
@@ -3810,10 +3810,10 @@ const IgcDockManager = class {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between'
-      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_b = this.splitterDockingIndicator) === null || _b === void 0 ? void 0 : _b.style.visibility) !== 'visible' &&
+      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_c = this.splitterDockingIndicator) === null || _c === void 0 ? void 0 : _c.style.visibility) !== 'visible' &&
       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: 'absolute',
+          position: 'fixed',
           zIndex: '10010',
           visibility: 'hidden'
         } })));
@@ -4977,7 +4977,7 @@ const IgcTabHeaderComponent = class {
     this.resourceStrings = undefined;
     this.forcedDrag = undefined;
     this.disabled = false;
-    this.showHeaderIconOnHover = undefined;
+    this.showHeaderIconOnHover = 'none';
   }
   connectedCallback() {
     this.dragService = new IgcDragService(this.element);
@@ -5030,24 +5030,24 @@ const IgcTabHeaderComponent = class {
     button === null || button === void 0 ? void 0 : button.setAttribute('part', parts);
   }
   renderCloseButton() {
-    const showHeaderIconOnHover = this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all');
+    const showHeaderIconOnHover = this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all';
     const shouldShowButton = this.selected || showHeaderIconOnHover;
-    const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover ? 'all' : 'none';
+    const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover !== 'none' ? 'all' : 'none';
     return (shouldShowButton && index.h("slot", { name: "tabHeaderCloseButton" }, index.h("igc-button-component", { part: "tab-header-close-button", style: {
         pointerEvents
       } }, index.h("igc-icon-component", { name: this.iconName, "aria-label": this.resourceStrings.close, title: this.resourceStrings.close }))));
   }
   renderMoreOptionsButton() {
-    const showHeaderIconOnHover = this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all');
+    const showHeaderIconOnHover = this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all';
     const shouldShowButton = this.selected || showHeaderIconOnHover;
-    const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover ? 'all' : 'none';
+    const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover !== 'none' ? 'all' : 'none';
     return (shouldShowButton && index.h("slot", { name: "tabHeaderMoreOptionsButton" }, index.h("igc-button-component", { part: "tab-header-more-options-button", style: {
         pointerEvents
       } }, index.h("igc-icon-component", { name: this.iconName, "aria-label": this.resourceStrings.moreOptions, title: this.resourceStrings.moreOptions }))));
   }
   render() {
-    const showCloseOnHover = this.iconName === 'close' && this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all');
-    const showMoreOptionsOnHover = this.iconName !== 'close' && this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all');
+    const showCloseOnHover = this.iconName === 'close' && (this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all');
+    const showMoreOptionsOnHover = this.iconName !== 'close' && (this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all');
     const parts = Utils.partNameMap({
       'tab-header': true,
       top: this.position === IgcTabHeadersPosition.top,
@@ -5281,7 +5281,7 @@ const IgcTabsComponent = class {
     const tabHeader = ev.target;
     const tabHeaders = this.tabHeaders;
     const headerIndex = tabHeaders.indexOf(tabHeader);
-    if (headerIndex >= 0 && (!ev.detail.showHeaderIconOnHover || !ev.detail.isIconClicked)) {
+    if (headerIndex >= 0 && (ev.detail.showHeaderIconOnHover === 'none' || !ev.detail.isIconClicked)) {
       this.selectedIndex = headerIndex;
     }
   }