igniteui-dockmanager 1.6.0 → 1.7.0-beta.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 1.7.0
+
+### New features
+- Customizable floating pane header
+
+### Bug fixes
+- Docking indicators appear over the currently dragged floating pane
+
 ## 1.6.0
 
 ### New features

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

@@ -2037,7 +2037,7 @@ const IgcDockManager = class {
       const draggedFloatingPane = draggedHeader.closest('igc-floating-pane-component');
       const topFloatingPane = elements.find(e => e.tagName.toLowerCase() === 'igc-floating-pane-component');
       if (topFloatingPane === draggedFloatingPane) {
-        const index = elements.indexOf(draggedFloatingPane);
+        const index = elements.lastIndexOf(draggedFloatingPane);
         elements.splice(0, index + 1);
       }
     }
@@ -2224,7 +2224,9 @@ const IgcDockManager = class {
         }
       }, 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, 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) }, 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 }))));
+      }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) }, index.h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, 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 }))));
   }
   renderSplitter(parentPane, pane) {
     return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));

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

@@ -432,7 +432,7 @@ export class IgcDockManager {
       const draggedFloatingPane = draggedHeader.closest('igc-floating-pane-component');
       const topFloatingPane = elements.find(e => e.tagName.toLowerCase() === 'igc-floating-pane-component');
       if (topFloatingPane === draggedFloatingPane) {
-        const index = elements.indexOf(draggedFloatingPane);
+        const index = elements.lastIndexOf(draggedFloatingPane);
         elements.splice(0, index + 1);
       }
     }
@@ -620,7 +620,9 @@ export class IgcDockManager {
       }, class: {
         'maximized': this.maximizedPane === pane
       }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) },
-      h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, 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) }, pane.headerId ? h("slot", { name: pane.headerId }) : pane.header),
+      h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, 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) ? h("slot", { name: pane.floatingHeaderId }) :
+        pane.headerId ? h("slot", { name: pane.headerId }) :
+          pane.header),
       h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) },
         h("slot", { name: pane.contentId }))));
   }

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

@@ -2033,7 +2033,7 @@ const IgcDockManager = class {
       const draggedFloatingPane = draggedHeader.closest('igc-floating-pane-component');
       const topFloatingPane = elements.find(e => e.tagName.toLowerCase() === 'igc-floating-pane-component');
       if (topFloatingPane === draggedFloatingPane) {
-        const index = elements.indexOf(draggedFloatingPane);
+        const index = elements.lastIndexOf(draggedFloatingPane);
         elements.splice(0, index + 1);
       }
     }
@@ -2220,7 +2220,9 @@ const IgcDockManager = class {
         }
       }, class: {
         'maximized': this.maximizedPane === pane
-      }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) }, h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, 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) }, pane.headerId ? h("slot", { name: pane.headerId }) : pane.header), h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) }, h("slot", { name: pane.contentId }))));
+      }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) }, h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, 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) ? h("slot", { name: pane.floatingHeaderId }) :
+      pane.headerId ? h("slot", { name: pane.headerId }) :
+        pane.header), h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) }, h("slot", { name: pane.contentId }))));
   }
   renderSplitter(parentPane, pane) {
     return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));